import React, { Component } from 'react'
import { searchQuery } from './../../utils/querySearch';
import { getSongList, getMusicInfo } from './../../api/musicList';
import styles from "./musicList.less"
import classNames from 'classnames';
import Icon from './../../components/icon/Icon';
import { connect } from "react-redux"
@connect(
  (state) => ({
    PayingMusic: state.PayingMusic,
    musicList: state.musicList
  }),
  dispatch => ({
    setMusic: (info) => dispatch({ type: 'platingMusic/save', payload: info }),
    addMusicList: (info) => dispatch({ type: 'musicList/add', payload: { info } }),
  })
)
export default class MusicList extends Component {
  state = {
    songListInfo: null,
    songListMusic: null,
    columnKey: [
      {
        name: "歌曲",
        key: "name"
      },
      {
        name: "歌手",
        key: "ar",
        type: "array"
      },
      {
        name: "专辑",
        key: "al"
      },
      {
        name: "时长",
        key: "dt"
      }
    ]
  }
  componentDidMount() {
    let search = this.props.location.search
    const { id } = searchQuery(search)
    this.getSongListInfo(id)

  }
  getSongListInfo = async (id) => {
    let res = await getSongList({ id })
    this.setState({
      songListInfo: res.playlist,
      songListMusic: res.playlist.tracks
    }, () => {
      console.log("songListInfo", this.state.songListInfo);
      console.log("songListMusic", this.state.songListMusic);
    })
  }
  playMusic = async (detail, e) => {
    if(e) {
      e.stopPropagation();;
    }
    let res = await getMusicInfo({keywords: detail.id})
    let musicInfo = res.songs[0]
    console.log(musicInfo);
    this.props.setMusic(musicInfo)

  }
  addMusicList = async (detail, e) => {

    if(e) {
      e.stopPropagation();;
    }
    let res = await getMusicInfo({keywords: detail.id})
    let musicInfo = res.songs[0]
    if(!this.props.PayingMusic.id) {
      this.playMusic(detail)
    }
    this.props.addMusicList(musicInfo)

  }
  render() {
    const { songListInfo, songListMusic, columnKey } = this.state
    if (!songListInfo || !songListMusic) {
      return (<div>请稍等</div>)
    }
    return (
      <div className={styles.music_list_box}>
        <div className={styles.music_list}>
          {/* <a href="#">MusicList</a> */}
          <div className={styles.top}>
            <div className={styles.top_img_box}>
              <img src={songListInfo.coverImgUrl} alt="" />
            </div>
            <div className={styles.info}>
              <div className={styles.song_list_name}>{songListInfo.name}</div>
              <div className={styles.description}>{songListInfo.description}</div>
              <div className={styles.tags}>
                标签：{
                  songListInfo.tags.map(item => (
                    <span key={item}>{item}</span>
                  ))
                }</div>
            </div>
          </div>
          <div className={styles.music_data_list}>
            <div className={styles.music_data_title}>
              <div className={styles.music_data_index}></div>
              <div className={styles.music_data_name}>歌曲</div>
              <div className={styles.music_data_artists}>歌手</div>
              <div className={styles.music_data_album}>专辑</div>
              <div className={styles.music_data_duration}>时长</div>
            </div>
            {songListMusic.map((item, index) => (
              <div key={item.id} className={classNames(styles.music_data_data)} onClick ={(e) => this.playMusic(item, e)} >
                {/* onClick ={(e) => this.playMusic(item, e)} */}
                <div className={styles.music_data_index}>{index + 1}</div>
                <div className={styles.music_data_name}>
                  <div className={styles.music_data_name_box}>
                    {item.name}
                  </div>
                  <div className={styles.music_icon}>
                    <div className={styles.music_play_icon} onClick ={(e) => this.playMusic(item, e)}>
                      <Icon type="icon-bofang1"/>
                    </div>
                    <div className={styles.music_play_icon} onClick={(e) => this.addMusicList(item, e)} >
                      <Icon type="icon-jia1"/>
                    </div>
                  </div>
                </div>
                <div className={styles.music_data_artists}>{
                  item.ar.map((artist, index) => (
                    <span key={index}>{artist.name} </span>
                  ))
                }</div>
                <div className={styles.music_data_album}>{item.al.name ? item.al.name : "未知"}</div>
                <div className={styles.music_data_duration}>{item.dt ?
                  (
                    <>
                    {parseInt(item.dt / 1000 / 60) < 10 ? "0" + parseInt(item.dt / 1000 / 60) : parseInt(item.dt / 1000 / 60)}： 
                    {parseInt(item.dt / 1000 % 60) < 10 ? "0" + parseInt(item.dt / 1000 % 60) : parseInt(item.dt / 1000 % 60)}
                    </>
                  )
                : "未知"}</div>
              </div>
            ))}
          </div>
        </div>
      </div>
    )
  }
}
